{layout name="public:layout" /}
{load href="/static/css/bindemail.css"}
{load href="/static/js/jquery.cookie.js"}
<div class="container">
    <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <h4 class="text-center" >{$title}</h4>
                <div style="height: 60px" class="text-center" ><span >您绑定的邮箱为:{$email}</span></div>
               <div><button type="button" class="btn btn-primary btn-block" name="code" id="open">修改邮箱</button></div>
            </div>
            <div class="col-sm-4"></div>
    </div>

</div>
<div class="model">
    <form action="changeEmail" method="post">
    <div class="model-header">
        <h3>验证</h3>
        <span class="close">×</span>
    </div>
    <div class="p-2">
        <div class="mb-3">
            <input type="text" class="mr-1" placeholder="请输入新邮箱" name="email" id="email" ><button type="button" class="btn btn-primary" id="send" onclick="sendm()">发送验证码</button>
        </div>
        <div class="mb-3">
            <input type="text" class="mr-1" placeholder="请输入验证码" id="code" name="code" onblur="checkCode()"><span id="Codeinfo"></span>
        </div>
        <button type="submit" class="btn btn-primary btn-block" id="submit" disabled="disabled">提交</button>
    </div>
    </form>

</div>

<script type="text/javascript">
    function sendm() {
        email=$('#email').val();
        console.log(email);
        if(email===''){
            return false
        }
        sendEmail();
        $.cookie('total',60);
        total = $.cookie('total');
        timer=setInterval(function () {
            if(total!=0){
                total--;
                $.cookie('total',total);
                $('#send').html('已发送'+total+'s');
                $('#send').attr('disabled','true');
            }else{
                clearInterval(timer);
                $.cookie('total',0,{ expires: -1 });
                $('#send').attr('disabled',false);
                $('#send').html('重新发送');
            }
        },1000)
    }
    function sendEmail() {

        $.ajax({
            url:"{:url('user/sendemail')}",
            data:{
                'toemail':$('#email').val()
            },
            dataType:'json',
            success:function (res) {
                console.log(1);
            }
        })
    }
    function checkCode(){
        $.ajax({
            url:"{:url('user/checkCode')}",
            data:{
                'code':$('#code').val()
            },
            dataType:'json',
            success:function (res) {
                if(res.status==1){
                    $('#Codeinfo').html('验证成功');
                    $('#submit').attr('disabled',false);
                }else{
                    $('#Codeinfo').html('验证失败');
                }
            }
        })
    }
    $(function(){
        $("#open").click(function(){
            showModel();
        });
        function showModel(){
            var wW=$('body').width();  //浏览器可视区域宽度和高度
            var wH=$('body').height();
            var oW=$(".model").innerWidth(); //获取类叫model的宽度和高度
            var oH=$(".model").innerHeight();
            $(".model").show().css({"top":(wH-oH)/2+"px","left":(wW-oW)/2+"px"});
            $(".mask").fadeIn();
        }
        $(window).resize(function(){
            if($(".model").is(":visible")){ //弹出框必须可见后 才能调用showModel()
                showModel();
            }
        });
        $(".close").click(function(){
            $(".model").hide();
            $(".mask").fadeOut();
        });
        $(document).keydown(function(ev){
            if(ev.keyCode==27){  //当按下键盘Esc时===》close关闭按钮
//				$(".model").hide();
//				$(".mask").fadeOut();
                $(".close").trigger("click");//trigger("事件名")  模拟事件
            }
        })
    });
</script>
<script>

    $(function () {

        if($.cookie('total')!=undefined&&$.cookie('total')!='NAN'&&$.cookie('total')!='null'){

            timesleep();
        }





        //防刷新
        function timesleep() {
            total = $.cookie('total');
            timer=setInterval(function () {
                if(total!=0){
                    total--;
                    $.cookie('total',total);
                    $('#send').html('已发送'+total+'s');
                    $('#send').attr('disabled','true')
                }else{
                    clearInterval(timer);
                    $.cookie('total',0,{ expires: -1 });
                    $('#send').attr('disabled',false);
                    $('#send').html('重新发送');

                }
            },1000);

        }

    })
</script>